<template>
  <div class="home">
    <div style="width: 100%;height: 100%" ref="main"></div>
  </div>
</template>

<script>
const chinaJson = require('@/assets/map/china.json')

export default {
  name: 'Home',
  data () {
    return {
      chinachart: null
    }
  },
  mounted () {
    // 另外发现的一个小tip，当注册中国地图用的不是’china’,是其他字符串，例如’CHINA’的时候，南海诸岛的会消失，这个可以当做一个工具，也可以当做一个重点用
    // 初始化echarts实例
    this.chinachart = this.$echarts.init(this.$refs.main)

    this.$echarts.registerMap('china', chinaJson)
    const option = {
      title: {
        text: '',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          if (!params.value) {
            return '该地区暂无访问量'
          }
          return params.seriesName + '<br />' + params.name + '：' + params.value + '次'
        },
        confine: true
      },
      visualMap: {
        min: 0,
        max: 0,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        itemWidth: 10,
        itemHeight: 70,
        inRange: {
          color: 'red'
        }
      },
      textStyle: {
        fontSize: 12,
        color: '#87CEFA'
      },
      series: [
        {
          name: '',
          type: 'map',
          zoom: 1.4,
          label: {
            show: false
          },
          center: [104.97, 35.71],
          mapType: 'china', // 自定义扩展图表类型
          itemStyle: {
            // normal: {label: {show: true}},
            emphasis: { label: { show: true } }
          },
          data: []
        }
      ]
    }
    option.title.text = '中国地图'
    option.visualMap.max = 2
    option.series[0].name = '高'
    option.series[0].data = '低'

    this.chinachart.setOption(option)
    window.addEventListener('resize', function () {
      this.chinachart.resize()
    })
  }
}
</script>

<style>
.home{
  height: 100%;
  width: 100%;
}
</style>
